// @ts-nocheck
import React, { useState, useMemo } from "react";
import { NavBar, Image, List, TextArea, ImageUploader, Toast } from "antd-mobile";
import { useNavigate, useLocation } from "react-router-dom";
import "./index.less";
import { upLoadImage, completeTask } from "../service";
import { getCurrentUserInfo } from "@/utils/authority";
import ReadOnlyMap from "@/components/MapComponent/ReadOnlyMap";

const WorkDetails: React.FC<any> = () => {
	const navigate = useNavigate();
	const location = useLocation();
	const userId = getCurrentUserInfo()?.data?.id;
	const { state } = location;
	const adress = { latitude: state?.formCommitData?.latitude, longitude: state?.formCommitData?.longitude };

	const [testValue, setTestValue] = useState("");
	const [ImageList, setImageList] = useState<{ url: string; name: string }[]>([]);

	const goBack = () => {
		navigate(-1);
	};
	const handleTask = async () => {
		if (!testValue) {
			Toast.show("请填写处理内容");
			return;
		}
		const params = {
			taskId: state?.taskId,
			userId: userId,
			processInstanceId: state?.procInstId,
			message: testValue,
			attachList: [],
		};

		try {
			const { code } = await completeTask(params);
			if (code == 200) {
				Toast.show("提交成功");
				goBack();
			}
		} catch { }
	};
	async function mockUpload(file: File) {
		try {
			const { data } = await upLoadImage({ file: file });
			if (data?.code === 200) {
				Toast.show({
					icon: "success",
					content: "上传成功",
				});
				const url = data.data.length && data.data[0].link;
				const name = data.data.length && data.data[0].name;
				return {
					url,
					name,
				};
			} else {
				Toast.show({
					icon: "fail",
					content: "上传失败",
				});
				return {
					url: "",
				};
			}
		} catch (err) {
			Toast.show({
				icon: "fail",
				content: "上传失败",
			});
			return {
				url: "",
			};
		}
	}
	const Basic = useMemo(() => {
		return (
			<div>
				<div className="figImg"></div>
				<ImageUploader
					maxCount={3}
					showUpload={ImageList.length < 3}
					value={ImageList}
					onChange={setImageList}
					upload={mockUpload}
					multiple={false}
					// maxCount={0}
					capture={true}
				/>
			</div>
		);
	}, [ImageList]);
	return (
		<div className="workDetails-content">
			<div className="header">
				<div>
					<NavBar onBack={() => goBack()}>
						<div className="commontitle">任务详情</div>
					</NavBar>
				</div>
				{state?.dcl && (
					<div
						className="header-right"
						onClick={() => navigate("/servicePolicy")}>
						服务政策
					</div>
				)}
			</div>
			<div className="workDetails-box">
				<div className="workDetails-box-card">
					<div className="workDetails-box-card-titlebg"></div>
					<div className="workDetails-box-card-item">
						<div className="workDetails-box-card-item-title">
							<div>{state?.formCommitData?.questiontitle || ""}</div>
							<div>{state?.formCommitData?.eventType || ""}</div>
						</div>
						<div className="workDetails-box-card-item-time">{state?.formCommitData?.createTime || ""}</div>
						<div className="workDetails-box-card-item-adress">{state?.formCommitData?.hadress || ""}</div>
					</div>
				</div>
				<div className="workDetails-box-name">
					<div>{state?.formCommitData?.reportPeople || ""}</div>
					<a href={`tel:${state?.formCommitData?.phone || ""}`}>{state?.formCommitData?.phone || ""}</a>
				</div>
				<div className="workDetails-box-description">{state?.formCommitData?.desc || ""}</div>
				<div className="workDetails-box-map">
					<ReadOnlyMap point={adress} />
				</div>
				{state?.dcl && (
					<>
						<div className="workDetails-box-handle">
							<div>处理记录</div>
							<TextArea
								placeholder="请输入"
								autoSize={{ minRows: 1, maxRows: 4 }}
								onChange={(val) => setTestValue(val)}
							/>
						</div>
						<div className="workDetails-box-handleImg">
							<div>处理照片</div>
							{Basic}
						</div>
						<div
							className="workDetails-box-buttom"
							onClick={() => handleTask()}>
							完成
						</div>
					</>
				)}
			</div>
		</div>
	);
};

export default WorkDetails;
